function ajax(obj, callback) {
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      if (typeof xhr.responseText === 'string') {
        var data = JSON.parse(xhr.responseText)
      } else {
        var data = xhr.responseText
      }
      callback(data)
    }
  }
  xhr.open(obj.method, 'https://qqmuise.vercel.app' + obj.url)
  if (obj.contentType) {
    xhr.setRequestHeader('content-type', obj.contentType)
  }
  xhr.send(JSON.stringify(obj.params))
}

// 热门新碟
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
function hotNewDish(data) {
  var da = data.albums
  for (let i = 0; i < 10; i++) {
    var dai = da[i]
    var li = document.createElement('li')
    li.innerHTML = `<div class="u-cover u-cover-alb2">
    <img
      src="${dai.picUrl}"
    />
    <a
      href="javascript:;"
      class="msk"
      title="${dai.name}"
    ></a>
    <a
      href="javascript:;"
      class="icon-play f-alpha f-fr"
      title="播放"
      data-res-type="19"
      data-res-id="${dai.id}"
      data-res-action="play"
    ></a>
  </div>
  <p class="dec">
    <a
      class="tit f-thide s-fc0"
      href="javascript:;"
      title="${dai.name}"
      >${dai.name}</a
    >
  </p>
  <p class="f-thide">
    <span class="nm f-thide" title="Eminem">
      <a class="s-fc3" href="javascript:;">${dai.artist.name}</a>
    </span>
  </p>`
    $('#hotnewdish').append(li)
  }
}
ajax(
  {
    method: 'get',
    url: `/album/newest?offset=0&amp;limit=10`,
  },
  hotNewDish
)
// 全部新碟
var totalPages //总页数
function allNewDish(data) {
  totalPages = Math.ceil(data.total / 35)
  $('#m-album-box')[0].innerHTML = ''
  for (let i = 0, len = data.albums.length; i < len; i++) {
    var weekData = data.albums[i]
    var obj = artistsName(weekData.artists)
    var li = document.createElement('li')
    li.innerHTML = `<li>
    <div class="u-cover u-cover-alb2">
      <img
        src="${weekData.picUrl}"
      /><a
        href="javascript:;"
        class="msk"
        title="${weekData.name}"
      ></a
      ><a
        href="javascript:;"
        class="icon-play f-alpha f-fr"
        title="播放"
        data-res-type="19"
        data-res-id="${weekData.id}"
        data-res-action="play"
      ></a>
      <p class="dec">
        <a
          class="tit f-thide s-fc0"
          href="javascript:;"
          title="${weekData.name}"
          >${weekData.name}</a
        >
      </p>
      <p class="f-thide">
        <span
          class="nm f-thide"
          title="${obj.spanTitle}"
          >${obj.artists}</span
        >
      </p>
    </div>`
    $('#m-album-box').append(li)
  }
  $('.zpgi')[8].innerHTML = `${totalPages}`
}
function artistsName(data) {
  var obj = {
    spanTitle: '',
    artists: '',
  }
  for (let i = 0, len = data.length; i < len; i++) {
    var name = data[i].name
    if (i !== len - 1) {
      obj.spanTitle += name + ' / '
      obj.artists += `<a href="javascript:;" class="s-fc3">${name}</a
      >&nbsp;/&nbsp;`
    } else {
      obj.spanTitle += name
      obj.artists += `<a href="javascript:;" class="s-fc3">${name}</a
      >`
    }
  }
  return obj
}
ajax(
  {
    method: 'get',
    url: `/album/new?offset=0&limit=35&area=ALL`,
  },
  allNewDish
)
var isArea = 'ALL'
$('#areaList').click(function (e) {
  if (e.target.nodeName === 'A') {
    var area = e.target.getAttribute('data-area')
    isArea = area
    ajax(
      {
        method: 'get',
        url: `/album/new?offset=0&limit=35&area=${area}`,
      },
      allNewDish
    )
    $('.zpgi.js-selected').removeClass('js-selected')
    $('.zpgi')[0].setAttribute('class', 'zpgi js-selected')
    $('.zprv').addClass('js-disabled')
  }
})
// 换页
$('.u-page').click(function (e) {
  if (e.target.classList[0] === 'zpgi') {
    var eti = e.target.innerHTML

    if (!$(e.target).hasClass('js-selected')) {
      ajax(
        {
          method: 'get',
          url: `/album/new?area=${isArea}&limit=35&offset=${
            (e.target.innerHTML - 1) * 35
          }`,
        },
        allNewDish
      )
    }

    therrDot(e.target)
    if (eti != 1 && eti != totalPages) {
      $('.zprv').removeClass('js-disabled')
      $('.znxt').removeClass('js-disabled')
    } else if (eti == totalPages) {
      $('.znxt').addClass('js-disabled')
      if ($('.zprv').hasClass('js-disabled')) {
        $('.zprv').removeClass('js-disabled')
      }
    } else if (eti == 1) {
      $('.zprv').addClass('js-disabled')
      if ($('.znxt').hasClass('js-disabled')) {
        $('.znxt').removeClass('js-disabled')
      }
    }
  }
})
// 判断是否需要添加'...'
var flg = true
var sign = false
function therrDot(data) {
  var val = data.innerHTML
  var con = [3, 2, 1, 0, -1, -2, -3]
  if (val > 5 && val <= totalPages - 5) {
    sign = true
    if (flg) {
      flg = false
      $('.zdot').remove()
      $('#auto-id-IcnXJZk2K9RMMk5g').after('<span class="zdot">...</span>')
      $('#auto-id-HLaTxSNAhTsRLFUG').before('<span class="zdot">...</span>')
    }
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = val - con[i - 1]
    }
    $('.zpgi.js-selected').removeClass('js-selected')
    $('.zpgi')[4].setAttribute('class', 'zpgi js-selected')
  } else if (val <= 5) {
    flg = true
    var zpgi_first = $('#auto-id-IcnXJZk2K9RMMk5g').next()
    $('.zpgi.js-selected').removeClass('js-selected')
    $(data).addClass('js-selected')
    if (zpgi_first[0].nodeName === 'SPAN') {
      zpgi_first.remove()
    }
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = 1 + i
    }
  } else if (val > totalPages - 5) {
    flg = true
    sign = true
    var zpgi_last = $('#auto-id-HLaTxSNAhTsRLFUG').prev()
    if (zpgi_last[0].nodeName === 'SPAN') {
      zpgi_last.remove()
    }
    var n = 7
    var res = 8 - (totalPages - data.innerHTML)
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = totalPages - n--
    }
    $('.zpgi.js-selected').removeClass('js-selected')
    if (sign) {
      sign = false
      $(`.zpgi`)[res].setAttribute('class', 'zpgi js-selected')
    } else {
      $(data).addClass('js-selected')
    }
  }
  if (val === totalPages - 1) {
    $('.znxt').addClass('js-disabled')
  }
  if (val === 2) {
    $('.zprv').addClass('js-disabled')
  }
}
// 上一页/下一页
$('.zprv').click(function () {
  var theHTML = $('.js-selected')[0].innerHTML
  if (theHTML == 2) {
    $('.js-selected').prev().click()
    $('.zprv').addClass('js-disabled')
    return
  } else {
    $('.znxt').removeClass('js-disabled')
    if (theHTML != 1) {
      $('.js-selected').prev().click()
    }
  }
})
$('.znxt').click(function () {
  var theHTML = $('.js-selected')[0].innerHTML
  if (theHTML == totalPages - 1) {
    $('.js-selected').next().click()
    $('.znxt').addClass('js-disabled')
    return
  } else {
    $('.zprv').removeClass('js-disabled')
    if (theHTML != totalPages) {
      $('.js-selected').next().click()
    }
  }
})
